<template>
  <div class="container">
    <el-form
      :model="fromData"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题:" prop="title">
        <el-col :span="12">
          <el-input
            v-model="fromData.title"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="景点描述:" prop="desc">
        <el-col :span="12">
          <el-input v-model="fromData.desc"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="缩略图:" prop="imageUrl" required>
        <Upload />
      </el-form-item>
      <el-form-item label="价格:" prop="price" required>
        <el-col :span="12">
          <el-input v-model="fromData.price"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="景点位置:" required>
        <el-row :span="24">
          <el-col :span="6">
            <div class="demo-input-suffix">
              <span>经度:</span
              ><el-input
                readonly
                placeholder="请输入经度"
                show-word-limit
                v-model="fromData.lng"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="demo-input-suffix">
              <span>纬度:</span
              ><el-input
                readonly
                placeholder="请输入纬度"
                show-word-limit
                v-model="fromData.lat"
              ></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :span="24">
          <el-col :span="12">
            <div id="map">
              <!---->
              <AmapComponent @locationResult="location" />
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="景点详情:" prop="detailinfo" required>
        <WangEditor :editorDetail="fromData.detailinfo" ref="editor" />
        <!-- this.$refs.editor.getEditorData() 获取富文本的内容 -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validPrice } from "@/utils/validate";
import Upload from "@/components/Upload";
import WangEditor from "@/components/WangEditor";
import AmapComponent from "./AmapComponents.vue";
export default {
  components: {
    Upload,
    WangEditor,
    AmapComponent,
  },

  data() {
    return {
      fromData: {
        title: "", // 景点标题
        desc: "", // 景点描述
        imageUrl: "", // 缩略图
        price: "", // 价格
        lng: "", // 经度
        lat: "", // 纬度
        detailinfo: "", // 景点详情
      },

      rules: {
        title: [{ required: true, message: "请输入景点标题", trigger: "blur" }],
        desc: [{ required: true, message: "请填写景点描述", trigger: "blur" }],
        imageUrl: [
          { require: true, message: "请添加景点的图片", trigger: "blur" },
        ],
        price: [
          {
            require: true,
            trigger: "blur",
            validator: validPrice,
          },
        ],
        detailinfo: [
          { require: true, message: "请填写景点详情", trigger: "blur" },
        ],

        lng: [{ require: true, message: "请填写景点的经度", trigger: "blur" }],
        lat: [{ require: true, message: "请填写景点的纬度", trigger: "blur" }],
      },
    };
  },
  methods: {
    location(val) {
      let { lat, lng } = val;
      this.fromData.lat = lat;
      this.fromData.lng = lng;
    },
    // 点击提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          // console.log(this.$refs.editor.getEditorData());   
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 点击重置
    resetForm() {
      this.$refs[formName].resetFields();
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
.demo-input-suffix {
  display: flex;
  align-items: center;
  > .el-input {
    width: 70%;
    margin-left: 10px;
  }
}

#map {
  width: 100%;
  height: 155px;
  border: 1px solid #ddd;
  margin-top: 10px;
}
</style>
